<style scoped lang="scss">

</style>

<template>
  <div class="app-container">
    <div class="">
      <el-form :inline="true" :model="listQuery">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="">
              <el-select v-model="listQuery.logFileType" clearable placeholder="请选择日志文件类型" @change="changeLogFileType">
                <el-option
                  v-for="(item,key) in logFiles"
                  :key="key"
                  :label="key"
                  :value="key"
                />
              </el-select>
              <el-select v-model="listQuery.logFilePath" clearable placeholder="请选择日志文件" style="width: 700px" @change="changeLogFilePath">
                <el-option
                  v-for="(item,key) in logFiles[listQuery.logFileType] || []"
                  :key="key"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="listQuery.keyword" placeholder="请输入关键字" class="input-with-select" clearable />
            </el-form-item>
            <el-form-item>
              <el-button v-waves type="primary" icon="el-icon-search" class="filter-item" @click="findLogFileContent">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="log-container">
      <div v-for="(item,key) in logContentList" :key="key" class="log-item">
        <div class="line">{{ item.line }}</div>
        <div class="content"> {{ item.data }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLogFiles, getLogFileContent } from '@/api/system/log'
export default {
  data() {
    return {
      listQuery: {
        keyword: null,
        logFileType: null, // 日志文件类型：crontab、crontabTask、websocket
        logFilePath: null,
        logStart: 1,
        logEnd: 100
      },
      logFiles: [],
      total: 0,
      listLoading: false,
      logContentList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getLogFiles().then(res => {
        console.log(res)
        this.logFiles = res.data
      })
    },
    changeLogFileType() {
      this.listQuery.logFilePath = null
      this.listQuery.logStart = 1
      this.listQuery.logEnd = 100
    },
    changeLogFilePath() {
      this.listQuery.logStart = 1
      this.listQuery.logEnd = 100
    },
    findLogFileContent() {
      getLogFileContent(this.listQuery).then(res => {
        if (res.data && res.data.length > 0) {
          res.data.forEach((item) => {
            this.logContentList.push(item)
          })
          // 继续查询下一页
          this.listQuery.logStart = this.listQuery.logEnd + 1
          this.listQuery.logEnd = this.listQuery.logEnd + 100
          this.findLogFileContent()
        }
      })
    }
  }
}
</script>
